<template>

  <div>

    <el-row :gutter="32">
      <el-col :lg="12">
        <div class="ml30 mt20">
          <div class="grid-content bg-purple-dark    text-size-23-w700  ">数据中心</div>
        </div>
        <div class="ml30 mt20  classflex-left">
          <el-button type="primary" icon="el-icon-search" @click="handleQuery(1)">上课记录</el-button>
          <el-button type="primary" icon="el-icon-search" @click="handleQuery(2)">订单记录</el-button>
          <el-button type="primary" icon="el-icon-search" @click="handleQuery(3)">操作日志</el-button>
        </div>
        <div class=" classflex-space-between ml30 mt50">
          <div class="text-size-20 text-black   ">学员数据概览</div>
        </div>
        <div class="content ml20">
          <!-- <el-card class="item" v-for="item in list" :key="item"> -->
          <div class="item" @click="tostudent(0)">

            <div class="text-gray text-size-14 hovertext">在读学员人数</div>


            <div class=" text-black text-size-20 mt20 ">{{studentCount.now_student_num}}</div>

          </div>
          <div class="item" @click="tostudent(1)">

            <div class="text-gray text-size-14 hovertext">历史学员人数</div>


            <div class=" text-black text-size-20 mt20 ">{{studentCount.older_student_num}}</div>

          </div>
          <div class="item" @click="tostudent(2)">

            <div class="text-gray text-size-14 hovertext">潜在学员人数</div>


            <div class=" text-black text-size-20 mt20 ">{{studentCount.potential_student_num}}</div>

          </div>
          <div class="item" @click="tostudent(3)">

            <div class="text-gray text-size-14 hovertext">即将到期学员</div>


            <div class=" text-black text-size-20 mt20 ">{{studentCount.num}}</div>

          </div>
          <div class="item" @click="tostudent(4)">

            <div class="text-gray text-size-14 hovertext">欠费代缴学员</div>


            <div class=" text-black text-size-20 mt20 ">{{studentCount.cost_num}}</div>


          </div>
          <div class="item" @click="tostudent(5)">

            <div class="text-gray text-size-14 hovertext">本月生日学员</div>


            <div class=" text-black text-size-20 mt20 ">{{studentCount.birthday_num}}</div>

          </div>

          <!-- </el-card> -->
        </div>
        <div class=" classflex-space-between ml30 mt50">
          <div class="text-size-20 text-black   ">教务数据总览</div>
        </div>
        <div class="content ml20">
          <!-- <el-card class="item" v-for="item in list" :key="item"> -->
          <div class="item" v-for="item in list2" :key="item.id">

            <div class="text-gray text-size-14 ">{{item.name}}</div>

            <div class=" text-black text-size-20 mt20 ">{{item.num}}</div>
            <!-- <p class="num">$ 1234</p> -->
            <!-- <p class="name">今日支付订单</p> -->
          </div>
          <!-- </el-card> -->
        </div>
        <div class=" classflex-space-between ml30 mt50">
          <div class="text-size-20 text-black   ">财务数据总览</div>
        </div>
        <div class="content ml20">
          <!-- <el-card class="item" v-for="item in list" :key="item"> -->
          <div class="item" v-for="item in list3" :key="item.id">
            <div class="text-gray text-size-14 ">{{item.name}}</div>
            <div class=" text-black text-size-20 mt20 ">{{item.num}}</div>
          </div>
        </div>
      </el-col>
      <el-col :lg="12">
        <div class="xian">
          <div class="   ml30 mt90  ">
            <div class="grid-content bg-purple-dark    text-size-23-w700  ">报表下载</div>
          </div>
          <div class="   ml30 mt30 mr40 ">
            <el-alert class="" title="vip专享，已开通！" type="warning">
            </el-alert>
          </div>
          <div class="contentright ml10 ">
            <el-card v-for="item in listright" :key="item.id" class="mt10 mr30 " shadow="hover">
              <div @click="tonow(item)" class="">
                <div class=" text-size-20-mt10-black  bian  " style="font-weight: 700;">{{item.name}}</div>
                <div class="text-size-15   text-gray mt10">{{item.des}}</div>
              </div>
            </el-card>
          </div>
        </div>
      </el-col>
    </el-row>






    <!-- 3.教师课消统计表.xls -->
    <el-drawer :title="text" :visible.sync="open_2" direction="rtl" size="25%" :show-close="false"
      :wrapperClosable="false">
      <el-row :gutter="20">
        <el-col :span="12">
          <div class="ml30">
            <div class="grid-content bg-purple-dark    text-size-23-w700  ">教师课消统计表.xls</div>
            <div class="grid-content bg-purple     text-size-16 mt20 text-gray  ">请设置报表下载范围</div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="classflex-end mt20 mr20">
            <el-button @click="cancel(2)" style="width: 100px; " class="">关闭</el-button>
          </div>
        </el-col>
      </el-row>
      <el-form class=" ml30 mr30" ref="form" :model="form" :rules="rules" label-width="80px" label-position="left">
        <el-divider style="width: 80%;"></el-divider>
        <el-form-item label="关联课程" prop="courseName">
          <el-select style="width: 360px;" v-model="form.courseName" placeholder="请选择课程" filterable>
            <el-option v-for="dict in courseList" :key="dict.id" :label="dict.courseName" :value="dict.courseName">
            </el-option>

          </el-select>
        </el-form-item>
        <el-form-item label="指定教师" prop="classTeacher">

          <el-select style="width: 360px;" v-model="form.classTeacher" placeholder="请选择教师" filterable>
            <el-option v-for="dict in userList" :key="dict.userId" :label="dict.nickName" :value="dict.nickName">
            </el-option>

          </el-select>

        </el-form-item>
        <el-form-item label="时间段">
          <el-date-picker v-model="dateRange" style="width: 360px;" value-format="yyyy-MM-dd" type="daterange"
            range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
        </el-form-item>

        <el-divider></el-divider>
        <div>
          <el-button type="primary" @click="submitForm" style="width: 100%;">立即下载</el-button>
          <!-- <el-button @click="cancel">取 消</el-button> -->
        </div>
      </el-form>
    </el-drawer>

    <!-- 4.教师课消明细表.xls -->
    <el-drawer :title="text" :visible.sync="open_3" direction="rtl" size="25%" :show-close="false"
      :wrapperClosable="false">
      <el-row :gutter="20">
        <el-col :span="12">
          <div class="ml30">
            <div class="grid-content bg-purple-dark    text-size-23-w700  ">教师课消明细表.xls</div>
            <div class="grid-content bg-purple     text-size-16 mt20 text-gray  ">请设置报表下载范围</div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="classflex-end mt20 mr20">
            <el-button @click="cancel(3)" style="width: 100px; " class="">关闭</el-button>
          </div>
        </el-col>
      </el-row>
      <el-form class=" ml30 mr30" ref="form" :model="form" :rules="rules" label-width="80px" label-position="left">
        <el-divider style="width: 80%;"></el-divider>

        <el-form-item label="指定教师" prop="classTeacher">
          <el-select style="width: 360px;" v-model="form.classTeacher" placeholder="请选择教师" filterable>
            <el-option v-for="dict in userList" :key="dict.userId" :label="dict.nickName" :value="dict.nickName">
            </el-option>

          </el-select>
        </el-form-item>
        <el-form-item label="时间段">
          <el-date-picker v-model="dateRange" style="width: 360px;" value-format="yyyy-MM-dd" type="daterange"
            range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
        </el-form-item>

        <el-divider></el-divider>
        <div>
          <el-button type="primary" @click="submitForm" style="width: 100%;">立即下载</el-button>
          <!-- <el-button @click="cancel">取 消</el-button> -->
        </div>
      </el-form>
    </el-drawer>

    <!-- 5.学员课消统计表.xls -->
    <el-drawer :title="text" :visible.sync="open_4" direction="rtl" size="25%" :show-close="false"
      :wrapperClosable="false">
      <el-row :gutter="20">
        <el-col :span="12">
          <div class="ml30">
            <div class="grid-content bg-purple-dark    text-size-23-w700  ">学员课消统计表.xls</div>
            <div class="grid-content bg-purple     text-size-16 mt20 text-gray  ">请设置报表下载范围</div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="classflex-end mt20 mr20">
            <el-button @click="cancel(4)" style="width: 100px; " class="">关闭</el-button>
          </div>
        </el-col>
      </el-row>
      <el-form class=" ml30 mr30" ref="form" :model="form" :rules="rules" label-width="80px" label-position="left">
        <el-divider style="width: 80%;"></el-divider>

        <el-form-item label="指定课程" prop="courseName">
          <el-select style="width: 360px;" v-model="form.courseName" placeholder="请选择课程" filterable>
            <el-option v-for="dict in courseList" :key="dict.id" :label="dict.courseName" :value="dict.courseName">
            </el-option>

          </el-select>
        </el-form-item>
        <el-form-item label="学员状态" prop="StudentState">

          <el-select style="width: 360px;" v-model="form.StudentState" placeholder="请选择学员状态">
            <el-option v-for="dict in dict.type.student_state" :key="dict.value" :label="dict.label"
              :value="dict.value"></el-option>
          </el-select>

        </el-form-item>


        <el-divider></el-divider>
        <div>
          <el-button type="primary" @click="submitForm" style="width: 100%;">立即下载</el-button>
          <!-- <el-button @click="cancel">取 消</el-button> -->
        </div>
      </el-form>
    </el-drawer>

    <!-- 6.学员课消明细表.xls -->
    <el-drawer :title="text" :visible.sync="open_5" direction="rtl" size="25%" :show-close="false"
      :wrapperClosable="false">
      <el-row :gutter="20">
        <el-col :span="12">
          <div class="ml30">
            <div class="grid-content bg-purple-dark    text-size-23-w700  ">学员课消明细表.xls</div>
            <div class="grid-content bg-purple     text-size-16 mt20 text-gray  ">请设置报表下载范围</div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="classflex-end mt20 mr20">
            <el-button @click="cancel(5)" style="width: 100px; " class="">关闭</el-button>
          </div>
        </el-col>
      </el-row>
      <el-form class=" ml30 mr30" ref="form" :model="form" :rules="rules" label-width="80px" label-position="left">
        <el-divider style="width: 80%;"></el-divider>


        <el-form-item label="指定学员" prop="courseSubject">

          <el-select style="width: 360px;" v-model="form.classStudent" placeholder="请选择学员" filterable>
            <el-option v-for="dict in studentList" :key="dict.id" :label="dict.userName" :value="dict.userName">
            </el-option>

          </el-select>


        </el-form-item>
        <el-form-item label="时间段">
          <el-date-picker v-model="dateRange" style="width: 360px;" value-format="yyyy-MM-dd" type="daterange"
            range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
        </el-form-item>


        <el-divider></el-divider>
        <div>
          <el-button type="primary" @click="submitForm" style="width: 100%;">立即下载</el-button>
          <!-- <el-button @click="cancel">取 消</el-button> -->
        </div>
      </el-form>
    </el-drawer>

    <!-- 7.学员剩余课时表.xls -->
    <el-drawer :title="text" :visible.sync="open_6" direction="rtl" size="25%" :show-close="false"
      :wrapperClosable="false">
      <el-row :gutter="20">
        <el-col :span="12">
          <div class="ml30">
            <div class="grid-content bg-purple-dark    text-size-23-w700  ">学员剩余课时表.xls</div>
            <div class="grid-content bg-purple     text-size-16 mt20 text-gray  ">请设置报表下载范围</div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="classflex-end mt20 mr20">
            <el-button @click="cancel(6)" style="width: 100px; " class="">关闭</el-button>
          </div>
        </el-col>
      </el-row>
      <el-form class=" ml30 mr30" ref="form" :model="form" :rules="rules" label-width="80px" label-position="left">
        <el-divider style="width: 80%;"></el-divider>

        <el-form-item label="指定课程" prop="courseName">
          <el-select style="width: 360px;" v-model="form.courseName" placeholder="请选择课程" filterable>
            <el-option v-for="dict in courseList" :key="dict.id" :label="dict.courseName" :value="dict.courseName">
            </el-option>

          </el-select>
        </el-form-item>



        <el-divider></el-divider>
        <div>
          <el-button type="primary" @click="submitForm" style="width: 100%;">立即下载</el-button>
          <!-- <el-button @click="cancel">取 消</el-button> -->
        </div>
      </el-form>
    </el-drawer>


    <!-- 8.上课记录表.xls -->
    <el-drawer :title="text" :visible.sync="open_7" direction="rtl" size="25%" :show-close="false"
      :wrapperClosable="false">
      <el-row :gutter="20">
        <el-col :span="12">
          <div class="ml30">
            <div class="grid-content bg-purple-dark    text-size-23-w700  ">上课记录表.xls</div>
            <div class="grid-content bg-purple     text-size-16 mt20 text-gray  ">请设置报表下载范围</div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="classflex-end mt20 mr20">
            <el-button @click="cancel(7)" style="width: 100px; " class="">关闭</el-button>
          </div>
        </el-col>
      </el-row>
      <el-form class=" ml30 mr30" ref="form" :model="form" :rules="rules" label-width="80px" label-position="left">
        <el-divider style="width: 80%;"></el-divider>

        <el-form-item label="指定课程" prop="courseName">
          <el-select style="width: 360px;" v-model="form.courseName" placeholder="请选择课程" filterable>
            <el-option v-for="dict in courseList" :key="dict.id" :label="dict.courseName" :value="dict.courseName">
            </el-option>

          </el-select>
        </el-form-item>
        <el-form-item label="时间段">
          <el-date-picker v-model="dateRange" style="width: 360px;" value-format="yyyy-MM-dd" type="daterange"
            range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
        </el-form-item>


        <el-divider></el-divider>
        <div>
          <el-button type="primary" @click="submitForm" style="width: 100%;">立即下载</el-button>
          <!-- <el-button @click="cancel">取 消</el-button> -->
        </div>
      </el-form>
    </el-drawer>











    <!-- DownOneStudent -->
    <down-student-drawer class="" ref="DownStudentDrawer">

    </down-student-drawer>
    <down-orderrecord-drawer class="" ref="DownOrderrecordDrawer">

    </down-orderrecord-drawer>
    
    <!-- 10.销售人员业绩统计表.xls -->
    <down-coursehourstatistics-drawer class="" ref="DownCoursehourstatisticsDrawer">
    
    </down-coursehourstatistics-drawer>
    
    <!-- 11.课时库存统计表.xls-->
    <down-salesperformance-drawer class="" ref="DownSalesperformanceDrawer">

    </down-salesperformance-drawer>
  <!-- 12.机构月收入统计表.xls-->
   <down-institutionalmonthlyincome-drawer class="" ref="DownInstitutionalmonthlyincomeDrawer">

    </down-institutionalmonthlyincome-drawer>

  </div>

</template>

<script>
  import DownStudentDrawer from '@/components/DownStudentDrawer'
  import DownSchedulingDrawer from '@/components/DownSchedulingDrawer'
  import DownOrderrecordDrawer from '@/components/DownOrderrecordDrawer'
  import DownCoursehourstatisticsDrawer from '@/components/DownCoursehourstatisticsDrawer'
   import DownInstitutionalmonthlyincomeDrawer from '@/components/DownInstitutionalmonthlyincomeDrawer'
      import DownSalesperformanceDrawer from '@/components/DownSalesperformanceDrawer'


  import {
    listBigdata,
    getBigdata,
    delBigdata,
    addBigdata,
    updateBigdata
  } from "@/api/bigdata/bigdata";

  import {
    listScheduling,
    getScheduling,
    delScheduling,
    addScheduling,
    updateScheduling
  } from "@/api/scheduling/scheduling";
  import {

    getCount,
    listStudent,
    getStudent,
    delStudent,
    addStudent,
    updateStudent
  } from "@/api/student/student";
  import {
    listUser,
    listUser2,
    getUser,
    delUser,
    addUser,
    updateUser,
    resetUserPwd,
    changeUserStatus,
    deptTreeSelect
  } from "@/api/system/user";
  import {
    listSchoolclass,
    getSchoolclass,
    delSchoolclass,
    addSchoolclass,
    updateSchoolclass
  } from "@/api/schoolclass/schoolclass";
  import {
    listCourse,
    getCourse,
    delCourse,
    addCourse,
    updateCourse
  } from "@/api/course/course";


  export default {
    name: "Bigdata",
    components: {
      DownStudentDrawer,
      DownSchedulingDrawer,
      DownOrderrecordDrawer,
      DownCoursehourstatisticsDrawer,
      DownInstitutionalmonthlyincomeDrawer,
      DownSalesperformanceDrawer
    },
    dicts: ['course_teaching_mode', 'course_state', 'course_subject', 'student_state', "order_state"],
    data() {
      return {
        text: "",
        courseList: null,
        dateRange: [],
        open_0: false,
        open_1: false,
        open_2: false,
        open_3: false,
        open_4: false,
        open_5: false,
        open_6: false,
        open_7: false,
        open_8: false,
        open_9: false,
        open_10: false,
        open_11: false,
        value: new Date(),
        url: "",
        circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
        list: [{
          id: 0,
          name: "在读学员人数",
          num: "111",
        }, {
          id: 1,
          name: "历史学员人数",
          num: "111",
        }, {
          id: 2,
          name: "潜在学员人数",
          num: "111",
        }, {
          id: 3,
          name: "即将到期学员",
          num: "111",
        }, {
          id: 4,
          name: "欠费代缴学员",
          num: "111",
        }, {
          id: 5,
          name: "本月生日学员",
          num: "111",
        }],
        list2: [{
          id: 0,
          name: "上课次数",
          num: "111",
        }, {
          id: 1,
          name: "上课课时数",
          num: "111",
        }, {
          id: 2,
          name: "待结算课节",
          num: "111",
        }, {
          id: 3,
          name: "消耗课时数",
          num: "111",
        }, {
          id: 4,
          name: "待消课时数",
          num: "111",
        }, {
          id: 5,
          name: "平均出勤率",
          num: "111",
        }],
        list3: [{
          id: 0,
          name: "订单总数",
          num: "111",
        }, {
          id: 1,
          name: "已完结订单数量",
          num: "111",
        }, {
          id: 2,
          name: "订单总额",
          num: "111",
        }, {
          id: 3,
          name: "已确认收入",
          num: "111",
        }, {
          id: 4,
          name: "杂费总收入",
          num: "111",
        }, {
          id: 5,
          name: "退款总额",
          num: "111",
        }],


        listright: [{
            id: 0,
            name: "学员档案表.xls",
            des: "用于导出学员基础资料留存备档，可按照在读/历史/潜在学员几种状态筛选"

          }, {
            id: 1,
            name: "排课表.xls",
            des: "用于导出课程表，可按课程、班级或时间段进行筛选"
          }, {
            id: 2,
            name: "教师课消统计表.xls",
            des: "统计教师的上课课时、课消和课消金额，可用于计算教师工资，支持按教师、课程或时间段筛选",
          }, {
            id: 3,
            name: "教师课消明细表.xls",
            des: "用于导出教师上课的课节、学员及学员对应课消等明细信息，可对照教师课消统计表进行核对",
          }, {
            id: 4,
            name: "学员课消统计表.xls",
            des: "用于导出学员报课订单明细，以及订单的退课退费和消耗统计",
          }, {
            id: 5,
            name: "学员课消明细表.xls",
            des: "用于导出按学员统计的上课明细记录表，数据量大，导出时间跨度尽量不要太大",
          }, {
            id: 6,
            name: "学员剩余课时表.xls",
            des: "统计截止至当前时间学员在读的课程班级，以及课时剩余信息",
          }, {
            id: 7,
            name: "上课记录表.xls",
            des: "用于导出按时间统计的上课明细记录表，数据量大，导出时间跨度尽量不要太大",
          }, {
            id: 8,
            name: "机构订单记录表.xls",
            des: "用于导出学员报名订单明细、以及退课记录表",
          }, {
            id: 9,
            name: "销售人员业绩统计表.xls",
            des: "用于导出销售人员业绩统计信息",
          }, {
            id: 10,
            name: "课时库存统计表.xls",
            des: "用于导出课程下课时剩余情况统计表",
          }, {
            id: 11,
            name: "机构月收入统计表.xls",
            des: "用于导出机构按月计算当月已确认收入的财务统计信息",
          }


        ],
        value2: "",
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 数据中心表格数据
        bigdataList: [],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          subtotal: null,
          deptId: null,
          remark2: null,
          remark3: null,
          remark4: null,
          remark5: null,
          remark6: null,
          remark7: null,
          remark8: null,
          remark9: null,
          remark10: null
        },
        // 表单参数
        form: {},
        // 表单校验
        rules: {},

        // 学生信息表格数据
        studentList: [],
        queryParamsStudent: {},
        userList: [],
        queryParamsTeacher: {},

        queryParamsSchool: {},
        queryParamsCourse: {},
        schedulingform: {},
        queryParamsStudents: {},
        studentCount: {},

      };
    },
    created() {


      this.getTeacherList();
      this.getStudentList();
      this.getCount();
    },
    methods: {
      tostudent(e) {
        // console.log(e);
        var url = "";
        switch (e) {
          case 0:
            url = "/student/student";
            this.$router.push({
              path: url,
              query: {
                type: "在读学员",

              }
            })



            break;
          case 1:
            url = "/student/student";
            this.$router.push({
              path: url,
              query: {
                type: "历史学员",

              }
            })


            break;
          case 2:
            url = "/student/student";
            this.$router.push({
              path: url,
              query: {
                type: "潜在学员",

              }
            })


            break;
          case 3:
            console.log("即将到期学员")



            // this.$refs.BecomeStudentDrawer.openbecomestudentlist();

            break;
          case 4:
            console.log("欠费待缴学员")
            // this.$refs.ArrearsStudentDrawer.openarrearsstudentlist();


            break;
          case 5:
            console.log("本月生日学员")


            // this.$refs.BirthdayStudentDrawer.openbirthdaystudent();
            break;



          default:
            url = "";
        }





      },
      getCount() {

        this.queryParamsStudents.deptId = this.$store.state.user.deptId;
        getCount(this.queryParamsStudents).then(response => {

          if (response.code == 200) {
            this.studentCount = response.data;
          }



        });
      },
      /** 查询学生信息列表 */
      getStudentList() {

        this.queryParamsStudent.deptId = this.$store.state.user.deptId;
        listStudent(this.queryParamsStudent).then(response => {
          this.studentList = response.rows;


        });
      },
      getTeacherList() {

        this.queryParamsTeacher.deptId = this.$store.state.user.deptId;

        listUser2(this.queryParamsTeacher).then(response => {
          this.userList = response.rows;

        });
      },






      cancel(e) {
        console.log(e);
        switch (e) {
          case 0:
            this.open_0 = false;
            break;
          case 1:
            this.open_1 = false;
            break;
          case 2:
            this.open_2 = false;
            break;
          case 3:
            this.open_3 = false;
            break;
          case 4:
            this.open_4 = false;
            break;
          case 5:
            this.open_5 = false;
            break;
          case 6:
            this.open_6 = false;
            break;
          case 7:
            this.open_7 = false;
            break;
          case 8:
            this.open_8 = false;
            break;
          case 9:
            this.open_9 = false;
            // DownOrderrecordDrawer
            break;
          case 10:
            this.open_10 = false;
            break;
          case 11:
            this.open_11 = false;
            break;
          default:

        }

      },
      tonow(e) {
        console.log(e.id);

        switch (e.id) {
          case 0:
            this.$refs.DownStudentDrawer.opendownstudent();
            break;
          case 1:
            this.$refs.DownSchedulingDrawer.opendownscheduling();
            break;
          case 2:
            this.open_2 = true;
            break;
          case 3:
            this.open_3 = true;
            break;
          case 4:
            this.open_4 = true;
            break;
          case 5:
            this.open_5 = true;
            break;
          case 6:
            this.open_6 = true;
            break;
          case 7:
            this.open_7 = true;
            break;
          case 8:
            // this.open_8 = true;
            this.$refs.DownOrderrecordDrawer.opendownorderrecord();
            break;
          case 9:
            // this.open_9 = true;
            this.$refs.DownSalesperformanceDrawer.opendown();
            

            break;
          case 10:
            // this.open_10 = true;
            this.$refs.DownCoursehourstatisticsDrawer.opendownCoursehourstatistics();

            break;
          case 11:
            // this.open_11 = true;
             this.$refs.DownInstitutionalmonthlyincomeDrawer.opendownInstitutionalmonthlyincome();

            break;
          default:

        }
      },

      /** 查询数据中心列表 */
      getList() {
        this.loading = true;
        listBigdata(this.queryParams).then(response => {
          this.bigdataList = response.rows;
          this.total = response.total;
          this.loading = false;
        });
      },
      // 取消按钮
      // cancel() {
      //   this.open = false;
      //   this.reset();
      // },
      // 表单重置
      reset() {
        this.form = {
          id: null,
          subtotal: null,
          deptId: null,
          delFlag: null,
          createBy: null,
          createTime: null,
          updateBy: null,
          updateTime: null,
          remark: null,
          remark2: null,
          remark3: null,
          remark4: null,
          remark5: null,
          remark6: null,
          remark7: null,
          remark8: null,
          remark9: null,
          remark10: null
        };
        this.resetForm("form");
      },
      /** 搜索按钮操作 */
      handleQuery(e) {
        // this.queryParams.pageNum = 1;
        // this.getList();
        if (e == 1) {
          this.url = "/bigdata/classrecords"

        } else if (e == 2) {
          this.url = "/bigdata/order"
        } else if (e == 3) {
          this.url = ""
        }


        this.$router.push({
          path: this.url,
          // query:{
          //   id:row.id,
          //   form:JSON.stringify(this.form)
          // }
        })
      },


      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.handleQuery();
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.id)
        this.single = selection.length !== 1
        this.multiple = !selection.length
      },
      /** 新增按钮操作 */
      handleAdd() {
        this.reset();
        this.open = true;
        this.title = "添加数据中心";
      },
      /** 修改按钮操作 */
      handleUpdate(row) {
        this.reset();
        const id = row.id || this.ids
        getBigdata(id).then(response => {
          this.form = response.data;
          this.open = true;
          this.title = "修改数据中心";
        });
      },
      /** 提交按钮 */
      submitForm() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            if (this.form.id != null) {
              updateBigdata(this.form).then(response => {
                this.$modal.msgSuccess("修改成功");
                this.open = false;
                this.getList();
              });
            } else {
              addBigdata(this.form).then(response => {
                this.$modal.msgSuccess("新增成功");
                this.open = false;
                this.getList();
              });
            }
          }
        });
      },
      /** 删除按钮操作 */
      handleDelete(row) {
        const ids = row.id || this.ids;
        this.$modal.confirm('是否确认删除数据中心编号为"' + ids + '"的数据项？').then(function() {
          return delBigdata(ids);
        }).then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        }).catch(() => {});
      },
      /** 导出按钮操作 */
      handleExport() {
        this.download('bigdata/bigdata/export', {
          ...this.queryParams
        }, `bigdata_${new Date().getTime()}.xlsx`)
      },





    }
  };
</script>
<style lang="scss" scoped>
  .content {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    padding: 20px;
    // background-color: skyblue;
  }

  .contentright {
    width: 100%;

    padding: 20px;
    // background-color: skyblue;
  }

  .classimage {
    // height: 120px;
  }

  .contentbottom {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    padding: 20px;
    // background-color: skyblue;
  }

  .classimage {
    height: 200px;
    width: 100%;
  }

  .item {
    flex: 0 0 calc((100% - 10px)/3);
    height: 100px;
    // background-color: pink;
    /* 间隙为5px */
    margin: 0 5px 5px 0;
  }

  .itemright {
    flex: 0 0 calc((100% - 20px)/4);
    // height: 120px;
    // background-color: pink;
    /* 间隙为5px */
    margin: 0 5px 5px 0;
  }

  .itemrightboot {
    flex: 0 0 calc((100% - 20px)/2);
    height: 280px;
    // background-color: pink;
    /* 间隙为5px */
    margin: 0 5px 5px 0;
  }

  .item:nth-child(3n) {
    /* 去除第3n个的margin-right */
    margin-right: 0;
  }

  .xian {
    border-left: 2px solid #f3f6ff;
  }
</style>
